<template>

	<view class="center-list">
		<view class="operate-receive">
			<view class="receive-left">
				<image src="/static/lh/equity/vip.png" style="width: 100rpx" mode="widthFix"></image>
			</view>
			<view class="receive-center">
				<view class="center-name">断浪中文会员</view>
				<view class="center-month">权益领取</view>
			</view>
			<view class="receive-btn">
				<button class="clickBtn" @click="laterTest">立即领取</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import initApi from '@/apis/init.js';
	//引入防抖函数
	import {
		customDebounce
	} from '@/utils/commo.js';

	const emit = defineEmits(['refrash']);
	const props = defineProps({
		pageParams: {
			type: Object,
			default: () => {}
		},
		orderNo: {
			type: String,
			default: ''
		}
	});
	const list1 = reactive([{
		name: 'TCL'
	}]);
	// 定义方法
	function click(item) {
		console.log('item', item);
	}


	// 立即领取
	const laterTest = async () => {
		//需要防抖执行的逻辑
		let arr = {
			equityDetailId: ''
		};
		// 接口获取 数据
		const res = await initApi.equityReceiveQueryPage({
			pageNum: 1,
			pageSize: 1000,
			condition: {
				userId: '',
				orderNo: props.orderNo
			}
		})
		if (res.code == 20000) {
			// UN_RECEIVE(1,"未领取"),
			// RECEIVE_SUCCESS(2,"已领取"),
			// RECEIVE_FAIL(3,"领取失败"),
			// receiveStatus
			const arr = res.data.records && res.data.records.filter(item => item.receiveStatus == 1)
			if (arr && arr.length > 0) {
				getTicket(arr[0])
			} else {
				return uni.utils.toast('暂无权益可以领取！！！');
			}
		} else {
			return uni.utils.toast(res.message);
		}

	}
	const getTicket = async (arr) => {
		
		try {
			const res = await initApi.receiveCommandReceiveEquity({
				id: arr.id
			})
			if (res.code == 20000) {
				setTimeout(() => {
					emit('refrash');
				}, 500);
				return uni.utils.toast('领取成功');

			} else {
				return uni.utils.toast(res.message);
			}
		} catch (error) {
			console.log(error);
			//TODO handle the exception
		}
	}
</script>

<style scoped lang="scss">
	.center-list {
		margin-top: 20rpx;

		.list-title {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.operate-receive {
			.receive-left {
				// line-height: 120rpx;
				margin-top: 15rpx;
				width: 100rpx;
			}

			.receive-center {
				flex-grow: 1;
				margin-left: 50rpx;

				.center-name {
					margin-top: 15rpx;
					font-size: 30rpx;
					font-weight: 600;
				}

				.center-month {
					margin-top: 10rpx;
				}
			}

			.receive-btn {
				width: 200rpx;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;

				.clickBtn {
					width: 160rpx;
					background-color: #6082ce;
					color: #fff;
					font-size: 24rpx;
					border-radius: 50rpx;
					line-height: 60rpx;
					height: 60rpx;
				}
			}

			margin: 0 auto;
			margin-top: 10rpx;
			height: 130rpx;
			border-radius: 5rpx;
			display: flex;
			width: 700rpx;
			background-color: #ffffff;
		}
	}
</style>